@charset "utf-8";
body{
    margin:0 auto;
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    background: url(../images/bg.gif);
    font-size: 12px;
    margin: 0px;
}
.style1 {
    color: #990000;
}
.top_bg{
    background:url(../images/z2.gif) repeat-x;
    width:106%;
    position:absolute;
    top:0;
    left:-6%;
    height:50%;
    z-index:-999;
}
.wrap {
    width: 1000px;
    margin: 0 auto;
}
.center {
    margin:0 auto;
    behavior: url(./scripts/PIE.htc);
}
.header{
    width:100%;
    margin-top:10px;
    position: relative;
}
.login {
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.left{
    display: inline-block;
}
.right{
    width:35%;
    float: right;
    vertical-align: bottom;
}

.username {
    padding:4px 10px 4px;
    font-size:11px;
    width:120px;
    outline: none;
}
.password {
    padding:4px 10px 4px;
    font-size:11px;
    width:120px;
    outline: none;
}
.submit{
    background: linear-gradient(to bottom, #f9f9f9 0%,#e4e4e4 100%);
    border: 1px solid #999;
    border-bottom-color: #888;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    color: #333;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 12px;
    padding: 7px 20px;
    cursor: pointer;
}
.remember{
    float:left;
    margin:0;
    font-size:12px;
    width: 100%;
    padding-top: 10px;
    color: #999999;
}
.remember input{
    float:right;
    margin:0px 0px 0px 5px;
}
.welcome{
    line-height:36px;
    font-size:16px;
    font-weight:bold;
}
.logout{
    margin:10px 5px 0;
    opacity:0.5;
    transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    font-weight:normal;
}
.logout:hover{
    opacity:1;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    font-weight:normal;
}
.navigation{
    display: inline-block;
}
.navigation ul li span{
    color:#333333;
    behavior: url(./scripts/PIE.htc);
    cursor:pointer;
    font-weight:bold;
    border-bottom:solid #CC0000 1px;
}
.navigation ul li{
    list-style:none;
    color: #FFFFFF;
    font-size:12px;
    position: relative;
    float: left;
    padding: 0px 10px;
    border-right:1px red solid;
}
.navigation ul li.last{
    border-right:none;
}
.navigation ul li:hover a{
    color: #990000;
}
.navigation ul li:hover{
    background: url(../images/bg.gif);
}
.navigation ul li.sub:hover a{
    color: #990000;
    border-bottom:none;
}
.navigation ul li.sub:hover{
    background: url(../images/bg.gif);
    -webkit-box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
}
.navigation ul li a{
    text-decoration:none;
    color: #333333;
    behavior: url(./scripts/PIE.htc);

}
.navigation ul li ul{
    padding:0;
    border:none;
}
.navigation ul li ul li{	
    display:none;
}
.navigation ul li:hover ul li{	
    display:block;
    float:none;
    background:none;
    z-index:1000;
    line-height:30px;
    font-size:11px;
    text-align:left;
    padding-left:10px;
    position:relative;
    color:#FFFFFF;
    border:none;
}
.navigation ul li.sub:hover ul li a{
    background:none;
    color:#003333;
    /*transition: all 0.5s ease-in;*/
    /*-webkit-transition: all 0.5s ease-in;*/
    /*-moz-transition: all 0.5s ease-in;*/
    /*font-weight:normal;*/
}
.navigation ul li.sub ul li a:hover{
    text-decoration-color: #FF0000;
    text-decoration: underline;
    /*border-left:solid 3px  #003366;*/
    /*color:red;*/
    /*padding-left:5px;*/
    /*transition: all 0.3s ease-in;*/
    /*-webkit-transition: all 0.3s ease-in;*/
    /*-moz-transition: all 0.3s ease-in;*/
    /*font-weight:normal;*/
}
.navigation ul li:hover{
    z-index:1004;
    behavior: url(./scripts/PIE.htc);
    position:relative;
}
.slider-wrapper {
    width: 100%;
    margin: 0 auto;
    z-index: -1000;
    position: relative;
}
.bigImg{
    padding-top:15px;
    width:100%;
    position:relative;
    z-index:999;
}
.drop-shadow {
    position:relative;
    width:100%;
    margin-bottom: 10px;
}
.drop-shadow:before,
.drop-shadow:after {
    content: "";
    position:absolute;
    z-index:-1;
    bottom:20px;
    left:15px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 20px 15px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 20px 15px rgba(0, 0, 0, 0.7);
    box-shadow:0 20px 15px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}
.drop-shadow:after{
    right:15px;
    left:auto;
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -o-transform:rotate(5deg);
    transform:rotate(5deg);
}
.content{
    background:url(../images/bg.gif);
    width:100%;
    margin-top:3%;
}

ul.submenu{
    position: absolute;
    width: 100%;
    float: left;
    height: auto;
    margin-left: -10px;
    background-color: #F2F2F2;
    z-index: 1000;
}
.wrap-content {
    -webkit-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    background:white;
    width:96%;
    margin-top:2%;
    padding:2%;
    min-height: 55%;
    margin-bottom: 10px;
}

#tracking-left{
    float:left;
    width:70%;
}
.tracking-ship-wrapper{
    margin-bottom: 10px;
    background: white;
    border: 1px solid #c4cde1;
    float: left;
    width: 100%;
}
.tracking-thumb {
    background: #CCFFCC;
    position: relative;
    float: left;
}
.tracking-thumb img {
    width: 180px;
    height: 180px;
}
.tracking-detail{
    float:left;
    font-size:11px;
    color:#333333;
    line-height: 0.5;
    position: relative;
    margin: 12px 16px 0 16px;
}
h1 {
    font-size:16px;
    line-height:50%;
    font-weight:bold;
}
.tracking-button{
    float:right;
}
.paging{
    margin-top:2%;
    left:2%;
    color:#FFFFFF;
    font-size:12px;
    z-index:1001;
}
.paging .active{
    background: #ba6d4a;
    padding:2px 6px;
}
.paging a{
    padding:2px 6px;
    text-decoration:none;
    color:#FFFFFF;
}
.tracking-right {
    width:25%;
    background: white;
    float:right;
    padding: 20px;
    border: 1px solid #c4cde1;
}
.tracking-right .refine {
    padding:4px 10px 4px;
    font-size:11px;
    width:65%;
    outline: none;
    margin-top:-3px;
}

.tracking-right select {
    width: 65%;
}

div.selectbox-wrapper {
    position:absolute;
    width:100%;
    float:right;
    background-color:rgba(255,255,255,0.8);
    border:1px solid #fff;
    margin:0px;
    margin-top:21px;
    padding:0px;
    text-align:left;
    overflow:auto; 
    font-size:11px;
    -webkit-box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow:1px 3px 5px rgba(0, 0, 0, 0.3);
}
.reselect{
    width:70%;
}

/*Drop down list styles*/
div.selectbox-wrapper ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
    background-color: none;
}

/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
    background-color: #d0e6d9;
}

/* Drop down list items style*/
div.selectbox-wrapper ul li {
    list-style-type:none;
    display:block;
    margin:0;
    padding: 4px 10px 4px;
    cursor:pointer;
}
.selectbox {
    padding: 4px 10px 4px;
    margin-top:-3px;
    font-size: 11px;
    width: 100%;
    color:#666;
    float:right;
    background: url(../images/list.png) no-repeat right #d0e6d9;
    cursor:pointer;
    border:0;
}
.tracking-right label {
    display: inline-block;
    width: 30%;
    font-size:12px;
}
.tracking-right .elements {
    padding-top:20px;
}
/* Detail */
#detail-content{
    -webkit-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    background:white;
    width:100%;
    margin-top:2%;
    margin-bottom:3%;
}

#detail-content .cleft{
    width:48%;
    font-size:12px;
    padding-right:2%;
    border-right:1px dotted #666;
    float:left;
}
#detail-content .cleft label, #detail-content .cright label {
    width: 40%;
    float: left;
    line-height:30px;
}
#detail-content .fill {
    width: 60%;
    float: left;
    line-height:30px;
}
#detail-content .c3 label {
    width: 55%;
    float: left;
    line-height:30px;
}
#detail-content .c3 .fill {
    width: 45%;
    float: left;
    line-height:30px;
}
#detail-content .cright{
    width:48%;
    font-size:12px;
    line-height:24px;
    float:right;
}
#detail-content .word-file{
    text-indent: 40px;
    background: url(../images/word.png) no-repeat left;
    line-height:30px;
}
#detail-content .pdf-file{
    text-indent: 40px;
    background: url(../images/pdf.png) no-repeat left;
    line-height:30px;
}
#detail-content .excel-file{
    text-indent: 40px;
    background: url(../images/excel.png) no-repeat left;
    line-height:30px;
}
.c4 td.more{
    text-indent:20px;
    text-align:left;
    border-bottom:1px dotted #b4c2c0;
    border-top:1px dotted #b4c2c0;
}
.date{
    width:12%;
    border-bottom:0;
    border-top:0;
}
.c4 td.item{
    border-bottom:0;
    border-top:0;
    line-height:36px;
}
.c4 th{
    line-height:36px;
}
/* Footer */
#footer-content-wrapper {

}
#footer{
    overflow: hidden;
    color: #333333;
    font-size: 11px;
    width: 1000px;
    margin: 0 auto;  
}
#footer p {
    line-height: 1;
}
#fbox1 {
    line-height:0px;
    text-align: center;
}
#footer ul li{
    line-height:18px;
    display:inline;
    text-transform:uppercase;
    font-size:14px;
}
#footer ul li a{
    text-decoration:none;
    color:#FFFFFF;
}
#footer ul{
    padding:0;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
#fright {
    float: right;
    text-align:right;
    width: 50%;
    padding-top: 20px;
    font-size: 12px;
    color:#CCCCCC;
}

.nivoSlider img {
    height: 500px !important;
    display:none;
}

#home-map-canvas {
    width: 100%;
    height: 700px;
}

#input-content{
    -webkit-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    box-shadow:-5px 7px 15px rgba(0, 0, 0, 0.4);
    background:white;
    width:96%;
    margin-top:2%;
    margin-bottom:3%;
    padding:2%;
}

.timeline th {
    border: 1px dotted #ffffff;
    background: #bedeca;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
}

.sub-update-menu, .sub-detail-menu {
    position: absolute;   
    webkit-box-shadow: -3px 5px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -3px 5px 3px rgba(0, 0, 0, 0.2);
    box-shadow: -3px 5px 3px rgba(0, 0, 0, 0.2);    
    border: thin solid #CCC;
    z-index: 999;
    background: #d6eaea;
    width: 99%;
    border-top: none;
    display: none;
}

.sub-update-menu div, .sub-detail-menu div {
    padding: 7px 0px;
    text-indent: 3%;
}

.sub-update-menu a, .sub-detail-menu a {
    color: #333333;
}

.sub-update-menu a:hover, .sub-detail-menu a:hover {
    text-decoration: underline;
}

a {
    text-decoration: none;
}

span.button {
    background: linear-gradient(to bottom, #f9f9f9 0%,#e4e4e4 100%);
    border: 1px solid #999;
    border-bottom-color: #888;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    color: #333;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    padding: 5px 6px;
    cursor: pointer;
}

.ui-dialog {
    position: fixed !important;
    top: 200px !important;
}
#tracking-content {
    width: 96%;
    margin-top: 2%;
    min-height: 55%;
    margin-bottom: 10px;
}
.wrap-tracking-button {
    margin-top: 5px;
}

#container-port .area {
    list-style-type: none;
    float: left;
    height: auto;
    width: 25%;
    margin-right: 2%;
}

#container-port .area .header-col{
    font-size: 25px;
    font-weight: bolder;
    text-align: center;
    color: #000000;
}

#container-port{
    width: 96%;
    position: relative;;
    border: 1px solid #C4CDE1;
    margin: 0 auto;
    margin-top: 2%;
    background-color: white;
}

#container-port div{
    overflow: hidden;
}

#frm_export_invoice input[type='submit'] {
    background: linear-gradient(to bottom, #f9f9f9 0%,#e4e4e4 100%); 
    float: right;
    width: auto;
    border: 1px solid #999;
    border-bottom-color: #888;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    cursor: pointer;
}